<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.css" />

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .mybox {
        width: 500px;
        margin: auto;
        margin-top: 20px;
    }

    .my-table {
        width: 800px;
        margin: auto;
        margin-top: 50px;
    }

    th,
    td {
        text-align: center;
    }
</style>

<body>
    <div class="form-horizontal mybox">
        <input type="button" class="btn btn-default" id="add" value="添加新用户" />

        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="username" placeholder="姓名" />
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-10">
                <input type="number" class="form-control" id="age" placeholder="年龄" />
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">电话</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="tel" placeholder="电话" />
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="email" placeholder="Email" />
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
            <label class="radio-inline" style="margin-left: 20px">
                <input type="radio" name="sex" value="男" checked />
                男
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex" value="女" />
                女
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex" value="unknow" />
                未知
            </label>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">民族</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="nation" placeholder="民族" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="button" class="btn btn-default" id="sub" value="提 交" />
            </div>
        </div>
    </div>
    <!-- //列表 -->
    <div id="my-list" class="my-table">
        <div style="width: 500px">
            <label for="inputEmail3" class="col-sm-2 control-label">姓名：</label>
            <div class="col-sm-10" style="width: 200px; float: left">
                <input type="text" class="form-control" id="keywords" placeholder="姓名" />
            </div>
            <input type="button" class="btn btn-default" id="search" value="搜 索" />
            <br /><br />
        </div>

        <table class="table table-bordered" style="margin-top: 30px">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th>性别</th>
                    <th>民族</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</body>
<script>
    var dataList = [],
        status = 'add', //告诉提交按钮是 编辑还是新增
        thisId = -1
    $(function () {
        showList()
        $('#search').click(function () {
            var keywords = $('#keywords').val()
            if (keywords.length) {
                var arr = dataList.filter(function (item) {
                    if (item.username.indexOf(keywords) != -1) {
                        return true
                    }
                })
                showList(arr)
            } else {
                showList()
            }
        })
        $('#add').click(function () {
            status = 'add'
        })
        //提交或编辑事件
        $('#sub').click(function () {
            var username = $('#username').val(),
                age = $('#age').val(),
                tel = $('#tel').val(),
                email = $('#email').val(),
                sex = $('input[name=sex]:checked').val(),
                nation = $('#nation').val()
            if (status == 'add') {
                dataList.push({
                    username: username,
                    age: age,
                    tel: tel,
                    email: email,
                    sex: sex,
                    nation: nation,
                })
                localStorage.setItem('dataList', JSON.stringify(dataList))
                //找到表格
                showList()
            } else {
                //编辑的逻辑
                dataList[thisId] = {
                    username: username,
                    age: age,
                    tel: tel,
                    email: email,
                    sex: sex,
                    nation: nation,
                }
                localStorage.setItem('dataList', JSON.stringify(dataList))
                showList()
            }
        })
        function showList(arr = []) {
            if (arr.length > 0) {
                dataList = arr
            } else {
                dataList = localStorage.getItem('dataList')
                    ? JSON.parse(localStorage.getItem('dataList'))
                    : []
            }
            var strHtml = ''
            for (let i in dataList) {
                strHtml += `<tr>
                <td>${dataList[i].username}</td>
                <td>${dataList[i].age}</td>
                <td>${dataList[i].tel}</td>
                <td>${dataList[i].email}</td>
                <td>${dataList[i].sex}</td>
                <td>${dataList[i].nation}</td>
                <td><a href="#" edit='edit' data-id="${i}" >编辑</a> | <a href="#"  data-id="${i}">删除</a></td>
            </tr>`
            }
            $('#my-list tbody').html(strHtml)
        }
        $('tbody').click(function () {
            if (event.target.nodeName == 'A') {
                //编辑
                if ($(event.target).attr('edit') == 'edit') {
                    status = 'edit'
                    thisId = $(event.target).attr('data-id')
                    data = dataList[thisId]
                    $('#username').val(data.username),
                        $('#age').val(data.age),
                        $('#tel').val(data.tel),
                        $('#email').val(data.email)
                    var num = data.sex == '男' ? 0 : data.sex == '女' ? 1 : 2
                    $('input[name=sex]').eq(num).prop('checked', true)
                    $('#nation').val(data.nation)
                } else {
                    //删除
                    dataList.splice($(event.target).attr('data-id'), 1)
                    localStorage.setItem('dataList', JSON.stringify(dataList))
                    showList()
                }
            }
        })
    })
</script>

</html>